
<div style="POSITION: relative" id="content">
  <h3>easyUI在可编辑的datagrid中计算两列的值 </h3>
  <div id="article_content" class="article_content">
    <p>在这个教程中你将学习如何包含一个运算的列在可编辑的<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">datagrid中,一个运算列通常包含一些运算&#20540;从一个或多个其他列.</span></p>
    <p><span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left"><img src="documentation/images/1344650868_8243.png" alt=""><br>
      </span></p>

    <p>首先,创建一个可编辑的datagrid,这就是我们创建的一些可编辑列,'listprice','amount' 和'unitcost' 列定义为numberbox 编辑类型,运算列是 'unitcost'字段,</p>
    <p>将是 listprice 乘以 amount列的结果.</p>
    <p>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; style=&quot;width:600px;height:auto&quot;  
        title=&quot;Editable DataGrid with Calculated Column&quot; iconCls=&quot;icon-edit&quot; singleSelect=&quot;true&quot;  
        idField=&quot;itemid&quot; url=&quot;data/datagrid_data.json&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;80&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot; editor=&quot;{type:'numberbox',options:{precision:1}}&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;amount&quot; width=&quot;80&quot; align=&quot;right&quot; editor=&quot;{type:'numberbox',options:{precision:0}}&quot;&gt;Amount&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot; editor=&quot;numberbox&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;150&quot; editor=&quot;text&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot; editor=&quot;{type:'checkbox',options:{on:'P',off:''}}&quot;&gt;Status&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    当用户点击一行的时候,我们开始一个编辑动作.
    </p>
    <p>
    <pre name="code" class="javascript">var lastIndex;  
$('#tt').datagrid({  
    onClickRow:function(rowIndex){  
        if (lastIndex != rowIndex){  
            $('#tt').datagrid('endEdit', lastIndex);  
            $('#tt').datagrid('beginEdit', rowIndex);  
            setEditing(rowIndex);  
        }  
        lastIndex = rowIndex;  
    }  
});  </pre>
    创建运算关系在一些列之间,我们应该得到<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">editors和绑定一些事件到他们上面.</span>
    </p>
    <p>
    <pre name="code" class="javascript">function setEditing(rowIndex){  
    var editors = $('#tt').datagrid('getEditors', rowIndex);  
    var priceEditor = editors[0];  
    var amountEditor = editors[1];  
    var costEditor = editors[2];  
    priceEditor.target.bind('change', function(){  
        calculate();  
    });  
    amountEditor.target.bind('change', function(){  
        calculate();  
    });  
    function calculate(){  
        var cost = priceEditor.target.val() * amountEditor.target.val();  
        $(costEditor.target).numberbox('setValue',cost);  
    }  
}  </pre>
    </p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid15-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
    <br>
    <br>
    <br>
    <p></p>
    <p><br>
    </p>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>